<template>
	<view>
		<view class="u-page">
			<view class="logo-area">
				<!-- <image class="logo" :src="logoIcon" mode="aspectFit"></image> -->
				<view class="welcome">
				<view>您好</view>
				<view>欢迎使用青阳建管云平台</view>

				</view>
			</view>
			<view class="login-type">
				<u-tabs :list="loginTypes" :current="loginType" @click="loginTypeClick"
					:activeStyle="{ color: '#4a4a4a', 'font-size': '16px', 'font-weight': 'bold'}"
					:inactiveStyle="{ color: '#626873', 'font-size': '16px'}"
				></u-tabs>
			</view>
			<view class="form" v-show="loginType == 0">


				<!-- <view class="input-item">
					<view class="left">
						<image class="icon x" src="/static/imgs/login/icon-x.png"></image>
					</view>
					<view class="right" @click="showPicker=true">
						<u--input class="inputlen" placeholder-class="cl" 
							v-model="selectSpace"
							:readonly="true" placeholder="请选择空间"></u--input>
					</view>

					<u-picker :closeOnClickOverlay="true" :show="showPicker" :columns="columns" @confirm="onConfirm" @cancel="showPicker = false"></u-picker>

				</view> -->

				<view class="input-item">
					<view class="left">
						<image class="icon r" src="/static/imgs/login/icon-r.png"></image>
					</view>
					<view class="right">
						<input class="inputlen" placeholder-class="cl" v-model="formUserName.username" placeholder="请输入用户名">
					</view>
				</view>
				<view class="input-item">
					<view class="left">
						<image class="icon s" src="/static/imgs/login/icon-s.png"></image>
					</view>
					<view class="right">
						<input class="inputlen" placeholder-class="cl" :password="showPassword" v-model="formUserName.password" placeholder="请输入密码">
						<view class="eye-btn" @click="eyePasswordClick()">
							<u-icon name="eye-fill" :color="showPassword ? '#d4d9e3' : '#4a4a4a'" size="22"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="form" v-show="loginType == 1">

			</view>
			<u-toast ref="uToast"></u-toast>
			<view class="loginBtn">
				<u-button type="primary" text="登录" @click="login()"
				 :disabled="disabledLoginBtn"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState, mapMutations} from 'vuex';
	export default {
		  computed: {
    ...mapState(["userInfo", "openId", "token", "characterType"]),
  },
		data() {
			return {
				logoIcon: '/static/imgs/login/logo.png',
				loginType: 0,
				loginTypes: [
                    {name: '账号登录', disabled: false},
                    // {name: '手机登录', disabled: true},
                ],
				showPassword: true,
				formUserName: {
					username: '',
					password: ''
				},
				formPhone: {
					phone: '',
					validateCode: ''
				},
				selectSpace: '',
				selectSpaceId: '',
				columns: [],
				showPicker: false
			}
		},
		onLoad() {
			var vm = this;
			// uni.showLoading();
			// vm.doWxLogin().then(res => {
			// 	uni.hideLoading();
			// 	vm.openId = res.openId;

			// 	vm.waitVariable('globalConfig').then(config => {
			// 		if (config.isMultiSpace) {
			// 			vm.getAndLoadV2('获取空间列表', '', function (res) {
			// 				vm.columns = [res.list.map(n => {
			// 					return {
			// 						text: n.title,
			// 						id: n.oId
			// 					}
			// 				})];
			// 				if (res.list.length == 1) {
			// 					vm.onConfirm({value: vm.columns[0]});
			// 				}
			// 			})		
			// 		}
			// 	});
			// });
		},
		computed: {
			...mapState(['globalConfig']),
			disabledLoginBtn: function () {
				return (this.columns.length && !this.selectSpaceId) || !this.formUserName.username || !this.formUserName.password;
			}
		},
		options: { styleIsolation: 'shared' },
		methods: {
			...mapMutations(['doLogin']),
			loginTypeClick: function (v) {
				$u.toast('手机登录功能暂未开放');
				// this.loginType = v.index;
				this.loginType = 0;
				return;
			},
			eyePasswordClick() {
				this.showPassword = !this.showPassword;
			},
			onConfirm: function (v) {
				this.selectSpace = v.value[0].text;
				this.selectSpaceId = v.value[0].id;
				this.showPicker = false;
			},
			login: function () {
				var vm = this;
				/*
				uni.getUserProfile({
					desc: '获取微信用户基本信息',
					success: function(wxRes) {
					},
					fail: function () {
						$u.toast('获取微信授权信息失败');
					}
				});
				*/
				uni.showLoading();
				var params = {
					openId: vm.openId,
					userName: vm.formUserName.username,
					password: vm.formUserName.password,
				};
				if (vm.columns.length) {
					params.ipId = vm.selectSpaceId;
				}
				vm.getAndLoad('登录', vm.WX_ASSETS+'/xcx/login/login.jsp?openId='  + vm.userInfo.openId+'&userName='+params.userName+'&password='+params.password, (res) => {
					uni.hideLoading();
					if (res.success && res.data) {
						vm.doLogin({
							...res.data
						});
						params.ipId && (global.ipId = params.ipId);
						uni.switchTab({ url: '/pages/index/index'});
					} else {
						vm.$refs.uToast.show({
							type: 'error',
							message: res.msg||"账号或密码不正确"
						});
					}

				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.u-page {
	background: #fff;
	@extend .height100;
}
.logo-area {
	background:  url("#{$WXIMAGES}/bj.png");
	background-size: 100%;
	width: 750rpx;
	height: 466rpx;
	@extend .flex-center;
	.welcome{
		width: 80%;
		height: 27%;
		font-size: 36rpx;
		font-weight: bold;
		color: #fff;
		margin-top: -60rpx;
		// background-color: aqua;
	}
	.logo {
		width: 309rpx;
		margin-top: -60rpx;
	}
}

.login-type {
	margin: -120rpx 60rpx 60rpx;
}
.form {
	margin: 80rpx;
	.input-item {
		display: flex;
		border: 2rpx solid #e5e9ee;
		border-radius: 8rpx;
		height: 80rpx;
		margin-bottom: 40rpx;
		.left {
			background: #f1f5fa;
			width: 80rpx;
			border-radius: 8rpx 0 0 8rpx;
			border-right: 1px solid #e5e9ee;
			@extend .flex-center;
			image.r {
				width: 33rpx;
				height: 31rpx;
			}
			image.s {
				width: 29rpx;
				height: 37rpx;
			}
			image.x {
				width: 38rpx;
				height: 38rpx;
			}
		}
		.right {
			flex-grow: 1;
			border-radius: 0 8rpx 8rpx 0;
			position: relative;
			.inputlen {
				width: 100%;
				height: 100%;
				background: transparent;
				font-size: 28rpx;
				padding: 0 80rpx 0 40rpx;
				box-sizing: border-box;
			}
			/deep/ .u-input {
				width: 100%;
				height: 100%;
				background: transparent;
				font-size: 28rpx;
				border: none;
				padding-left: 40rpx !important;
				input {
					font-size: 28rpx !important;
				}
			}
			.cl {
				color: #d4d9e3;
			}
			.eye-btn {
				position: absolute;
				top: 22rpx;
				right: 20rpx;
			}
		}
	}
}
.loginBtn {
	margin: 120rpx 80rpx;
}
</style>
